<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">
            <f:view>
                <h:form>
                    <h:panelGrid columns="1" style="width:650px;margin: 0px auto;">
                        <p:commandButton id="btnNuevoCategoria" action="#{MBCategoriaArticulo.nuevo()}" value="AGREGAR CATEGORIA" ajax="false"/>
                    </h:panelGrid> 
                </h:form>
                <h:form>
                    <p:panel id="pnlBusquedaCategorias" header="Consultar Categorias" style="width:650px;margin: 5px auto"  
                             toggleable="true" widgetVar="buscar" collapsed="#{BKCategoriaArticulo.lisCategoriaArticulosActivos ne null}" >
                        <p:panelGrid>
                            <p:row >
                                <p:column>
                                    <h:outputText id="lblBanco" value="TIPO ARTICULO: " class="lblBusqueda"  />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu value="#{BKCategoriaArticulo.categoriaArticulo.tipoInsumo}" style="width: 130px">   
                                        <f:selectItem itemLabel="Seleccionar" itemValue="%"/> 
                                        <f:selectItems value="#{BKCategoriaArticulo.listaTipoArticulo}"
                                                       var="tipoArticulo" itemLabel="#{tipoArticulo.desParametroDet}"
                                                       itemValue="#{tipoArticulo.valCadena}"/>
                                    </p:selectOneMenu>  
                                </p:column>
                                <p:column>
                                    <h:outputText value="TIPO MATERIAL: " class="lblBusqueda" />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu value="#{BKCategoriaArticulo.categoriaArticulo.tipoMaterial}" style="width: 100%">   
                                        <f:selectItem itemLabel="Seleccionar" itemValue="%"/> 
                                        <f:selectItems value="#{BKCategoriaArticulo.listaTipoMaterial}"
                                                       var="tipoMaterial" itemLabel="#{tipoMaterial.desParametroDet}"
                                                       itemValue="#{tipoMaterial.valCadena}" />
                                    </p:selectOneMenu>
                                </p:column>
                            </p:row>
                            <p:row >
                                <p:column>
                                    <h:outputText  class="lblBusqueda" value="TIPO CATEGORIA: "   />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="cbxTipoCategoria" value="#{BKCategoriaArticulo.categoriaArticulo.tipoCategoria}" style="width: 130px">   
                                        <f:selectItem itemLabel="Seleccionar" itemValue="%" /> 
                                        <f:selectItems value="#{BKCategoriaArticulo.listaTipoCategoria}"
                                                       var="tipoCategoria" itemLabel="#{tipoCategoria.desParametroDet}"
                                                       itemValue="#{tipoCategoria.valCadena}"/>
                                    </p:selectOneMenu>
                                </p:column>
                                <p:column>
                                    <h:outputText id="lblNombreCategoriaBuscar" value="NOMBRE: " class="lblBusqueda" />
                                </p:column>
                                <p:column>
                                    <p:inputText onkeyup="cambiarMayuscula(this)" id="txtNombreBancoBuscar" value="#{BKCategoriaArticulo.categoriaArticulo.nombre}" size="40" />
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <p:commandButton id="btnBuscarBanco" value="BUSCAR" update="pnlBusquedaCategorias,dataTablaCategorias"  
                                                     actionListener="#{MBCategoriaArticulo.buscarListaCategorias}" styleClass="ui-priority-primary" 
                                                     oncomplete="listaCategorias.show();buscar.toggle()" style="font-size: 12px"/>
                                </p:column>
                            </p:row>
                        </p:panelGrid>

                    </p:panel>

                    <p:panel header="Lista Categorias" closable="true" visible="#{(BKCategoriaArticulo.lisCategoriaArticulosActivos eq null)?false:true}" widgetVar="listaCategorias">
                        <p:dataTable  id="dataTablaCategorias" var="categoria" value="#{BKCategoriaArticulo.lisCategoriaArticulosActivos}" 
                                      widgetVar="carsTable" emptyMessage="No se encontraron categorias" styleClass="datable-busqueda"
                                      filteredValue="" paginator="true" rows="20" scrollHeight="250" paginatorPosition="bottom"   
                                      paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                                      {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" style="width:100%"
                                      rowsPerPageTemplate="20,40,60" rowIndexVar="index" scrollable="true" > 

                            <f:facet name="header" >
                                <p:outputPanel layout="block" >
                                    <h:commandButton value="Exportar EXCEL">  
                                        <p:dataExporter type="xls" target="dataTablaCategorias" fileName="categorias" />  
                                    </h:commandButton>  

                                    <h:commandButton value="Exportar PDF">  
                                        <p:dataExporter type="pdf" target="dataTablaCategorias" fileName="categorias"/>  
                                    </h:commandButton>
                                </p:outputPanel>

                            </f:facet>

                            <p:column id="idColumnaNum" sortBy="#{categoria.id}"
                                      style="width: 5%" headerText="Num."
                                      filterMatchMode="contains"> 
                                <h:outputText value="#{index+1}" /> 
                            </p:column>

                            <p:column headerText="Tipo de Cat." sortBy="#{categoria.tipoCategoria}" 
                                      style="width: 15%">
                                <h:outputText value="#{categoria.tipoCategoria eq 72?'SUB CAT.':'CATEGORIA'}" /> 
                            </p:column>

                            <p:column headerText="Cat. Padre" filterMatchMode="contains" 
                                      filterBy="#{categoria.idCategoriaArticulo.nombre}" 
                                      sortBy="#{categoria.idCategoriaArticulo.nombre}" style="width: 18%">
                                <h:outputText value="#{categoria.idCategoriaArticulo.nombre}" /> 
                            </p:column>

                            <p:column id="idColumnaNombreCategoria" sortBy="#{categoria.nombre}"
                                      headerText="Nombre" filterMatchMode="contains" style="width: 18%"> 
                                <h:outputText value="#{categoria.nombre}" /> 
                            </p:column>

                            <p:column headerText="Tipo de Art." sortBy="#{categoria.tipoMaterial}" style="width: 15%"> 
                                <h:outputText value="#{categoria.tipoMaterial eq 83?'SIMPLE':'COMPUESTO'}" /> 
                            </p:column>

                            <p:column headerText="Tipo de Mat." sortBy="#{categoria.tipoInsumo}" style="width: 15%"> 
                                <h:outputText value="#{categoria.tipoInsumo eq 80?'PRIMARIO':'SECUNDARIO'}" /> 
                            </p:column>

                            <p:column id="idAccionesCategorias" headerText="Acciones" style="width: 14%" >
                                <p:commandButton icon="ui-icon-search" title="Ver" action="#{MBCategoriaArticulo.ver()}" ajax="false">
                                    <f:setPropertyActionListener value="#{categoria}" target="#{BKCategoriaArticulo.categoriaArticuloFormulario}" />  
                                </p:commandButton>
                                <p:commandButton icon="ui-icon-pencil" title="Editar" action="#{MBCategoriaArticulo.editar()}" ajax="false">
                                    <f:setPropertyActionListener value="#{categoria}" target="#{BKCategoriaArticulo.categoriaArticuloFormulario}" />  
                                </p:commandButton>  
                                <p:commandButton id="btnEliminarCategorias" title="Eliminar" icon="ui-icon-trash"  oncomplete="confirmacion.show()">
                                    <f:setPropertyActionListener value="#{categoria}" target="#{BKCategoriaArticulo.categoriaArticuloSelccionado}" />
                                </p:commandButton>
                            </p:column>

                        </p:dataTable>	
                    </p:panel>

                    <p:confirmDialog id="dlgEliminarCategorias" message="¿ Desea eliminar este artículo ?" 
                                     header="Eliminar Artículo" severity="alert" widgetVar="confirmacion">
                        <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">

                            <p:commandButton id="btnConfEliCategorias" update="dataTablaCategorias" value="Si"  oncomplete="confirmacion.hide()"  
                                             actionListener="#{MBCategoriaArticulo.eliminar}"/>  
                            <p:commandButton id="btnCancEliCategoria" value="No" onclick="confirmacion.hide()" type="button" />   

                        </h:panelGrid>    
                    </p:confirmDialog>		 
                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>
</html>   